import { Spin, message } from 'antd';
import React, { useEffect, useState } from 'react';
import { history, connect } from 'umi';

import type { FC } from 'react';

import sayuanCloud from '@/assets/images/sayuanCloud.png';
import type { OrderManageState } from '@/models/orderManage';
import { forWechatPay } from '@/services/orderManage';
import { priceFormat } from '@/util/utils';

import styles from './index.less';

interface Props {
  wechatData: any;
}
const USER_INFO = JSON.parse(localStorage.getItem('USER_INFO') as string);
const wechatData = JSON.parse(localStorage.getItem('WechatData') as string);
const WechatPay: FC<Props> = () => {
  const [loading, setLoading] = useState(false);
  // const { wechatData } = props;

  let timer: any;
  const getWechatPayStatus = async (id: string) => {
    const res = await forWechatPay(id);
    timer = setInterval(() => {
      clearInterval(timer);
      getWechatPayStatus(id);
    }, 1000);
    if (res.code === 200 && res.data.success) {
      clearInterval(timer);
      setTimeout(() => {
        message.success('支付成功！');
        history.push('/PayStatus');
      }, 1000);
    } else {}
  };
  useEffect(() => {
    getWechatPayStatus(wechatData?.id);
    return () => {
      clearInterval(timer);
    };
  }, []);

  useEffect(() => {
    console.log(wechatData);
    if(JSON.stringify(wechatData) == '{}'){
      setLoading(true);
    }
    setLoading(false);
    return () => {
      localStorage.removeItem('WechatData');
    };
  }, [wechatData]);
  return (
    <Spin spinning={loading}>
      <div className={styles.content}>
        <img onClick={() => history.push('/')} className={styles.logo} src={sayuanCloud} alt=""/>
        <div className={styles.wechatPay}>
          <div className={styles.title}>
            <div className={styles.titleLine}>微信支付</div>
          </div>
          <div className={styles.payContent}>
            {/*left*/}
            <div>
              <div className={styles.orderInfo}>
                <div>手机号码： {wechatData?.phone}</div>
                <div>企业全称： {USER_INFO.companyName}</div>

                <div>订购版本： {wechatData?.orderType}</div>
                <div>产线数量： {wechatData?.addProduction === true ? wechatData?.totalLine : wechatData?.productionLineNum}</div>
                {
                  !!wechatData?.addProduction ? null : <div>订购时长：{wechatData?.payYear}{wechatData.buyTimeUnit===1 ? '日' : '年'}</div>
                }
              </div>
              <div className={styles.payInfo}>
                {/*<div className={styles.money}>订单金额 <span>￥{isNaN(Number(wechatData?.totalPrice)) ? '' : priceFormat(Number(wechatData?.totalPrice))}</span></div>*/}
                <div className={styles.money}>订单金额 <span>￥{typeof (wechatData?.totalPrice)==='number' ? priceFormat(Number(wechatData?.totalPrice)) :(wechatData?.totalPrice)}</span></div>
                <div className={styles.afterPay}>付款完成后可申请发票</div>
              </div>
            </div>

            {/*right*/}
            <div>
              <div className={styles.qrcode}>
                <img src={wechatData?.qrCode} alt=""/>
              </div>
              <div className={styles.des}>打开微信“扫一扫”完成支付</div>
            </div>
          </div>
        </div>
      </div>
    </Spin>
  );
};
const mapState = ({ OrderManage }: { OrderManage: OrderManageState }) => {
  return {
    wechatData: OrderManage?.wechatData,
  };
};
export default connect(mapState)(WechatPay);
